<template>
  <el-col :span="20" style="height: 93vh; overflow-y: scroll;padding: 1vh">
    <div style="width: auto;height: 22vh; display: flex; margin-bottom: 2vh">
      <div style="width: 22vw; background-color: rgba(47,79,108,0.93); margin-right: 2vh;padding: 1vh">
        <div style="display: flex">
          <h3>微博数总和</h3>
          <div class="BTN"><i class="el-icon-s-order"></i></div>
        </div>

        <div style="display: flex">
          <h1>1,242,123</h1>
          <div class="tagUp">+2.89%</div>
        </div>
        <p>与上个月相比</p>
        <el-progress :percentage="30" :color="customColors"></el-progress>
      </div>
      <div style="width: 22vw; background-color: rgba(47,79,108,0.93); margin-right: 2vh;padding: 1vh">
        <div style="display: flex">
          <h3>本月微博数</h3>
          <div class="BTN"><i class="el-icon-s-data"></i></div>
        </div>
        <div style="display: flex">
          <h1>21,438</h1>
          <div class="tagLow">-17.49%</div>
        </div>
        <p>与上个月相比</p>
        <el-progress :percentage="60" :color="customColors"></el-progress>
      </div>
      <div style="width: 22vw; background-color: rgba(47,79,108,0.93); margin-right: 2vh;padding: 1vh">
        <div style="display: flex">
          <h3>评论数总和</h3>
          <div class="BTN"><i class="el-icon-s-order"></i></div>
        </div>
        <div style="display: flex">
          <h1>1,407,813</h1>
          <div class="tagUp">+12.59%</div>
        </div>
        <p>与上个月相比</p>
        <el-progress :percentage="80" :color="customColors"></el-progress>
      </div>
      <div style="width: 22vw; background-color: rgba(47,79,108,0.93);padding: 1vh">
        <div style="display: flex">
          <h3>本月评论数</h3>
          <div class="BTN"><i class="el-icon-s-comment"></i></div>
        </div>
        <div style="display: flex">
          <h1>23,163</h1>
          <div class="tagUp">+3.89%</div>
        </div>
        <p>与上个月相比</p>
        <el-progress :percentage="20" :color="customColors"></el-progress>
      </div>
    </div>

    <div style="margin-bottom: 2vh">
      <div id="mergeChart" style="width: auto; height: 40vh"></div>
    </div>
    <div style="width: auto; display: flex">
      <div id="radarChart" style="width: 60vw; height: 40vh; margin-right: 1vh"></div>
      <div id="lineChart" style="width: 40vw; height: 40vh"></div>
    </div>


  </el-col>
</template>

<script>
export default {
  // eslint-disable-next-line vue/multi-word-component-names
  name: "Summary",
  data() {
    return {
      customColors: [
        {color: '#f56c6c', percentage: 21},
        {color: '#e6a23c', percentage: 41},
        {color: '#5cb87a', percentage: 61},
        {color: '#1989fa', percentage: 81},
        {color: '#6f7ad3', percentage: 100}
      ]
    }
  },
  mounted() {
    this.drawMerge();
    this.drawRadar();
    this.drawLine();
  },
  methods: {
    drawMerge() {
      let myChart = this.$echarts.init(document.getElementById('mergeChart'), "west")
      myChart.setOption({
        title: {
          text: '近一周微博话题量'
        },
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'cross',
            label: {
              backgroundColor: '#6a7985'
            }
          }
        },
        legend: {
          data: ['COVID-19', '毒株', '疫苗', '疫情放开']
        },
        toolbox: {
          feature: {
            saveAsImage: {}
          },
          iconStyle: {
            borderColor: 'rgba(248,246,246)',
          },
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true
        },
        xAxis: [
          {
            type: 'category',
            boundaryGap: false,
            data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
          }
        ],
        yAxis: [
          {
            type: 'value'
          }
        ],
        series: [
          {
            name: 'COVID-19',
            type: 'line',
            areaStyle: {},
            emphasis: {
              focus: 'series'
            },
            data: [342, 782, 413, 609, 401, 797, 548]
          },
          {
            name: '毒株',
            type: 'line',
            areaStyle: {},
            emphasis: {
              focus: 'series'
            },
            data: [696, 626, 330, 694, 354, 403, 316]
          },
          {
            name: '疫苗',
            type: 'line',
            areaStyle: {},
            emphasis: {
              focus: 'series'
            },
            data: [418, 493, 379, 334, 669, 792, 532]
          },
          {
            name: '疫情放开',
            type: 'line',
            areaStyle: {},
            emphasis: {
              focus: 'series'
            },
            data: [569, 502, 1125, 599, 750, 702, 603]
          }
        ]
      })
    },
    drawRadar() {
      let myChart = this.$echarts.init(document.getElementById('radarChart'), "dark")
      myChart.setOption({
        title: {
          text: '关注度分析'
        },
        tooltip: {
          trigger: 'item'
        },
        legend: {
          left: 'center',
          data: [
            '关注的年龄大小',
            '微博关注度',
            '评论关注度',
            '微博热度',
            '评论热度'
          ]
        },
        radar: [
          {
            indicator: [
              {text: 'COVID-19', max: 100},
              {text: '毒株', max: 100},
              {text: '疫苗', max: 100},
              {text: '疫情放开', max: 100}
            ],
            center: ['25%', '40%'],
            radius: 80
          },
          {
            indicator: [
              {text: '学生', max: 100},
              {text: '在职', max: 100},
              {text: '工人', max: 100},
              {text: '教师', max: 100},
              {text: '退休', max: 100}
            ],
            radius: 80,
            center: ['50%', '60%']
          },
          {
            indicator: (function () {
              var res = [];
              for (var i = 1; i <= 12; i++) {
                res.push({text: i + '月', max: 100});
              }
              return res;
            })(),
            center: ['78%', '40%'],
            radius: 80
          }
        ],
        series: [
          {
            type: 'radar',
            tooltip: {
              trigger: 'item'
            },
            areaStyle: {},
            data: [
              {
                value: [60, 73, 85, 40],
                name: '关注的年龄大小'
              }
            ]
          },
          {
            type: 'radar',
            radarIndex: 1,
            areaStyle: {},
            data: [
              {
                value: [93, 50, 34, 51, 80],
                name: '微博关注度'
              },
              {
                value: [88, 24, 47, 51, 61],
                name: '评论关注度'
              }
            ]
          },
          {
            type: 'radar',
            radarIndex: 2,
            areaStyle: {},
            data: [
              {
                name: '微博热度',
                value: [71, 82, 72, 52, 56, 54, 84, 68, 49, 58, 51, 60]
              },
              {
                name: '评论热度',
                value: [86, 98, 58, 67, 92, 65, 66, 64, 72, 88, 73, 70]
              }
            ]
          }
        ]
      })
    },
    drawLine() {
      let myChart = this.$echarts.init(document.getElementById('lineChart'), "chalk")
      myChart.setOption({
        title: {text: '近一周评论话题量'},
        xAxis: {
          type: 'category',
          data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
        },
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'cross',
            label: {
              backgroundColor: '#6a7985'
            }
          }
        },
        yAxis: {
          type: 'value'
        },
        legend: {
          data: ['COVID-19', '毒株', '疫苗', '疫情放开']
        },
        series: [
          {
            name: 'COVID-19',
            data: [436, 496, 346, 585, 462, 486, 583],
            type: 'line',
            smooth: true
          },
          {
            name: '毒株',
            data: [354, 486, 473, 407, 307, 568, 535],
            type: 'line',
            smooth: true
          },
          {
            name: '疫苗',
            data: [435, 301, 593, 588, 567, 453, 564],
            type: 'line',
            smooth: true
          },
          {
            name: '疫情放开',
            data: [585, 620, 1306, 578, 710, 647, 729],
            type: 'line',
            smooth: true
          }
        ]
      })
    },
  }
}
</script>

<style scoped>
h3 {
  margin-block-start: 0;
  color: #e6e3e3;
  margin-block-end: 0.5em;
}

h1 {
  color: #ffffff;
  margin-block-end: 0;
}

p {
  margin-block-start: 0.4em;
  color: #c0bdbd;
  font-family: Avenir, Helvetica, Arial, sans-serif;
  margin-block-end: 1.8em;
}

.tagUp {
  cursor: default;
  width: 3.6vw;
  height: 2.4vh;
  margin-top: 4vh;
  margin-left: 1vw;
  border-radius: 4px;
  background-color: rgba(69, 141, 69, 0.8);
  color: #00ff3f;
  font-size: 1.5vh;
  line-height: 2.4vh;
  text-align: center;
  font-family: Consolas, Menlo, Monaco, Lucida Console, Liberation Mono, DejaVu Sans Mono, Bitstream Vera Sans Mono, Courier New, monospace, serif;
}

.tagLow {
  cursor: default;
  width: 3.6vw;
  height: 2.4vh;
  margin-top: 4vh;
  margin-left: 1vw;
  border-radius: 4px;
  background-color: rgba(211, 29, 77, 0.8);
  color: white;
  font-size: 1.5vh;
  line-height: 2.4vh;
  text-align: center;
  font-family: Consolas, Menlo, Monaco, Lucida Console, Liberation Mono, DejaVu Sans Mono, Bitstream Vera Sans Mono, Courier New, monospace, serif;
}

.BTN {
  width: 2.3vw;
  height: 4.6vh;
  border-radius: 30%;
  background-color: rgba(239, 243, 242, 0.16);
  margin-left: 10.6vw;
  text-align: center;
}

.BTN i {
  font-size: 3vh;
  color: rgb(106, 222, 212);
  padding-top: .7vh;
}
</style>